<template>
  <div class="source-list">
    <div class="navigation">
      <template v-for="(nav, idx) in navTree">
        <div
          :key="idx"
          class="nav-item"
          @click="handleDepartCheck(nav)"
        >{{ nav.departName }}</div>
        <Icon
          v-if="idx !== navTree.length - 1"
          :key="`${idx}-divition`"
          type="ios-arrow-forward"
        />
      </template>
    </div>
    <div class="action">
      <Checkbox
        :value="ifSelectAll"
        @on-change="handleSlectAll"
      >{{ $t("areaIndex.areaSearchAll") }}</Checkbox>
      <div class="num">{{ personList.length }}{{ $t("BodyTemperatureIndex.BodyTemAnimalMan") }}</div>
    </div>
    <div class="list">
      <div class="depart-list">
        <div
          v-for="(depart, idx) in departList" :key="idx"
          class="depart-item"
          @click="handleDepartCheck(depart)"
        >
          <Icon class="item-icon" type="md-folder" />
          <div class="item-title">{{ depart.departName }}</div>
        </div>
      </div>
      <div class="person-list">
        <div
          v-for="(person, idx) in personList" :key="idx"
          class="person-item"
          @click="handlePersonCheck(person)"
        >
          <Checkbox
            :value="_checkIfSelect(person)"
          />
          <Icon class="item-icon" type="md-contact" size="24" />
          <div class="item-title">{{ person.username }}</div>
        </div>
      </div>
      <Empty v-if="departList.length === 0 && personList.length === 0" />
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

import Empty from './Empty'

const MAX_LEN = 5

export default {
  props: {
    value: {
      type: Array,
      default: () => ([]),
    },
    navigation: {
      type: Array,
      default: () => ([]),
    },
    departList: {
      type: Array,
      default: () => ([]),
    },
    personList: {
      type: Array,
      default: () => ([]),
    },
  },
  components: {
    Empty,
  },

  computed: {
    navTree () {
      return _.takeRight(this.navigation, MAX_LEN)
      // return this.navigation
    },
    ifSelectAll () {
      // 全选处理
      let ifAll = false
      for (let i = 0; i < this.personList.length; i += 1) {
        console.log(9999)
        const ifSel = this._checkIfSelect(this.personList[i])
        if (!ifSel) {
          break
        }
        ifAll = ifSel
      }
      return ifAll
    },
  },

  methods: {
    _checkIfSelect (person) {
      // console.log(person)
      // console.log(this.value)
      // console.log(!!_.find(this.value, p => p.mid === person.mid))
      return !!_.find(this.value, p => p.mid === person.mid)
    },
    handleSlectAll (status) {
      this.personList.forEach(person => {
        this.$emit('person-click', person, status)
      })
    },
    handleDepartCheck (depart) {
      this.$emit('depart-click', depart)
    },
    handlePersonCheck (person) {
      console.log('我进来啦  你信不信')
      const ifSel = this._checkIfSelect(person)
      this.$emit('person-click', person, !ifSel)
    },
  },
}
</script>

<style lang="less" scoped>
.source-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .navigation {
    flex-shrink: 0;
    display: flex;
    line-height: 28px;
    .ivu-icon {
      line-height: 28px;
    }

    .nav-item {
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .action {
    flex-shrink: 0;
    display: flex;
    border: 1px solid @clr-border;
    border-width: 1px 0;
    .num {
      flex: 1;
      text-align: right;
    }
  }
  .list {
    flex: 1;
    overflow: auto;
  }
}
</style>
